<template>
  <div class="wrap">
    <div class="form">
      <el-form :inline="true" :model="ruleform" ref="from" :rules="rules">
        <div class="con">
          <el-form-item label="序列号" prop="sn">
            <el-input
              v-model="ruleform.sn"
              autocomplete="off"
              style="width: 300px"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="别称" prop="alias">
            <el-input v-model="ruleform.alias" placeholder></el-input>
          </el-form-item>
          <el-form-item label="经度" prop="longitude">
            <el-input v-model="ruleform.longitude" placeholder></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="latitude">
            <el-input v-model="ruleform.latitude" placeholder></el-input>
          </el-form-item>
          <el-form-item label="国家" prop="nation">
            <el-input v-model="ruleform.nation" placeholder></el-input>
          </el-form-item>
          <el-form-item label="省份" prop="province">
            <el-input v-model="ruleform.province" placeholder></el-input>
          </el-form-item>
          <el-form-item label="城市" prop="city">
            <el-input v-model="ruleform.city" placeholder></el-input>
          </el-form-item>
          <el-form-item label="区域" prop="district">
            <el-input v-model.number="ruleform.district" placeholder></el-input>
          </el-form-item>
          <el-form-item label="街道" prop="address">
            <el-input v-model.number="ruleform.address" placeholder></el-input>
          </el-form-item>
          <el-form-item label="邮编" prop="cityCode">
            <el-input v-model="ruleform.cityCode" placeholder></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="medium"
              @click="submitModify('from')"
              >提交</el-button
            >
            <el-button
              type="warning"
              size="medium"
              plain
              @click="onReset('from')"
              >重置</el-button
            >
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="map" v-if="globalToCompany == 'sugon'">
      <el-card>
        <MapArcgis
          v-if="loadingAll"
          :markArc="markArc"
          @mark="fnMark"
          @path="fnPath"
          :lng_lat="lng_lat"
          :averageCenter="false"
          :marker="marker"
          :center="center"
        ></MapArcgis>
      </el-card>
    </div>
    <div class="map" v-else>
      <el-card>
        <MapBaidu
          v-if="loadingAll"
          :markArc="markArc"
          @paintMarker="fnPaintMarker"
          @mark="fnMark"
          @path="fnPath"
          :lng_lat="lng_lat"
          :averageCenter="false"
          :marker="marker"
          :center="center"
        ></MapBaidu>
      </el-card>
    </div>
  </div>
</template>

<script>
import MapBaidu from "./coms/MapBaidu.vue"; //百度地图
import MapArcgis from "./coms/MapArcgis"; //arcgis地图
import { getData, postData } from "@/request/http";
export default {
  name: "",
  components: {
    MapBaidu,
    MapArcgis,
  },
  props: {},
  data() {
    return {
      ruleform: {
        sn: "",
        longitude: "",
        latitude: "",
        nation: "",
        province: "",
        city: "",
        cityCode: "",
        district: "",
        address: "",
        loadingAll: false,
        markArc: "",
        globalToCompany: "",
      },
      rules: {
        sn: [{ required: false, message: "", trigger: "blur" }],
        longitude: [
          { required: false, message: "请输入纬度", trigger: "blur" },
        ],
        latitude: [{ required: false, message: "请输入经度", trigger: "blur" }],
        nation: [{ required: false, message: "", trigger: "blur" }],
        province: [{ required: false, message: "", trigger: "blur" }],
        city: [{ required: false, message: "", trigger: "blur" }],
        cityCode: [{ required: false, message: "", trigger: "blur" }],
        district: [{ required: false, message: "", trigger: "blur" }],
        address: [{ required: false, message: "", trigger: "blur" }],
      },
      lng_lat: {
        longitude: "",
        latitude: "",
      },
      markArc: {},
      marker: [],
      center: {},
      loadingAll: false,
    };
  },
  computed: {},
  created() {
    this.fnToCompany();
  },
  mounted() {
    this.ruleform.sn = this.$route.query.sn;
    this.ruleform.alias = this.$route.query.alias;
    this.initShow();
  },
  methods: {
    //初始判断是哪个公司，加载不同的地图
    fnToCompany() {
      this.globalToCompany = window.toCompany;
    },
    //初始显示
    initShow() {
      this.loadingAll = false;
      postData("/adminweb/device/location/get", {
        sn: this.ruleform.sn,
      })
        .then((res) => {
          console.log(res);
          this.loadingAll = true;
          if (res.code == 0) {
            let datas = res.datas;
            console.log(datas);
            this.center = {
              lat: datas.latitude,
              lng: datas.longitude,
            };
            //百度地图打点
            this.marker = [{ lat: datas.latitude, lng: datas.longitude }];

            //arcgis地图的打点
            this.markArc = res.datas;
            //反填input
            this.ruleform.longitude = datas.longitude;
            this.ruleform.latitude = datas.latitude;
            this.ruleform.nation = datas.nation;
            this.ruleform.province = datas.province;
            this.ruleform.city = datas.city;
            this.ruleform.cityCode = datas.city_code;
            this.ruleform.district = datas.district;
            this.ruleform.address = datas.address;
            this.lng_lat.longitude = datas.longitude;
            this.lng_lat.latitude = datas.latitude;
          } else if (res.code == -56528) {
            this.$message.error("未找到该设备地理位置，使用配置的默认位置");
            console.log(window.baseCenter);
            this.ruleform.latitude = baseCenter.lat;
            this.ruleform.longitude = baseCenter.lng;
            //百度地图打点
            this.marker = [
              {
                lat: baseCenter.lat,
                lng: baseCenter.lng,
                type: 0,
                id: new Date().getTime(),
              },
            ];
            this.center = { lat: baseCenter.lat, lng: baseCenter.lng };
            //arcgis地图的打点
            this.markArc = {
              latitude: this.ruleform.latitude,
              longitude: this.ruleform.longitude,
            };
            // this.markArc = {
            //   address: "",
            //   city: "",
            //   city_code: "",
            //   district: "",
            //   latitude: baseCenter.lat,
            //   longitude: baseCenter.lng,
            //   nation: "",
            //   province: "",
            // };
          } else if (res.code == -57027) {
            console.log(window.baseCenter);
            this.$message.error(
              "未找到该设备地理位置，使用配置的默认中心点位置！"
            );
            this.ruleform.latitude = baseCenter.lat;
            this.ruleform.longitude = baseCenter.lng;
            this.center = { lat: baseCenter.lat, lng: baseCenter.lng };
            //百度地图的打点数据
            this.marker = [
              {
                lat: baseCenter.lat,
                lng: baseCenter.lng,
                type: 0,
                id: new Date().getTime(),
              },
            ];
            //arcgis地图的打点数据
            this.markArc = {
              latitude: this.ruleform.latitude,
              longitude: this.ruleform.longitude,
            };
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error("加载失败");
          this.loadingAll = true;
        });
    },
    
    // 地图打点
    async fnPaintMarker(marker) {
      console.log(marker.address);
      this.ruleform = Object.assign(this.ruleform, {
        longitude: marker.point.lng,
        latitude: marker.point.lat,
        province: marker.address.province,
        city: marker.address.city,
        district: marker.address.district,
        address: marker.address.street + marker.address.streetNumber,
      });
    },
    //提交
    submitModify(formName) {
      var that = this;
      this.loadingAll = false;
      that.$refs[formName].validate((valid) => {
        if (valid) {
          postData("/adminweb/device/location/set", {
            sn: that.ruleform.sn,
            longitude: that.ruleform.longitude,
            latitude: that.ruleform.latitude,
            nation: that.ruleform.nation,
            province: that.ruleform.province,
            city: that.ruleform.city,
            city_code: that.ruleform.cityCode,
            district: that.ruleform.district,
            address: that.ruleform.address,
          })
            .then((res) => {
              this.loadingAll = true;
              if (res.code == 0) {
                that.$message.success("提交成功！");
                
                // setTimeout(function () {
                //   that.$router.go(-1);
                // }, 1000);
                this.initShow();
              } else {
                that.$message.error(res.code + "，" + res.msg);
              }
            })
            .catch((res) => {
              this.loadingAll = true;
              that.$message.error(res.code + "，" + res.msg);
            });
        } else {
          that.$message.error("提交失败");
          return false;
        }
      });
    },
    // 重置
    onReset(val) {
      //this.$emit("reset", true);
      this.$refs[val].resetFields();
    },

    /*
     * @desc 地图打点
     * */
    fnMark(data) {
      console.log(data);
      this.ruleform = Object.assign({}, this.ruleform, {
        longitude: data["data"][0].lng,
        latitude: data["data"][0].lat,
        nation: "中国",
        province: data["info"]["province"],
        city: data["info"]["city"],
        district: data["info"]["district"],
        address: data["info"]["address"],
      });
    },

    /*
     * 地图路径
     * */
    fnPath(arr) {
      console.log(arr);
    },
  },
  watch: {},
};
</script>
<style scoped>
/* .wrap{
    display: flex;

} */
.form {
  width: 100%;
  height: auto;
  background: #fff;
  padding: 20px;
  padding-bottom: 0;
  overflow: hidden;
}
.map {
  margin-top: 15px;
}
</style>
